<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <script>
  	var songListName = [<?php require_once 'songlistName_json.php';?>];
  	var songListId = [<?php require_once 'songlistId_json.php';?>];
    $(document).ready(function()
    {
      $("input#autocomplete").autocomplete({
      	source: songListName
      });
    });

		function checkSongId()
		{
			for (var i=0; i< songListName.length; i++)
			{
				if(document.getElementById("autocomplete").value == songListName[i])
				{
  				document.getElementById("sid").value = songListId[i];
  			}
			}
		}
  </script>
</head>
<body>
  <div id="searchBoxContainer" class="ui-widget">
  	<form action="/poem/song.php" method="get" onsubmit="checkSongId();">
  		<input type="hidden" id="sid" name="sid"/>
      <label for="searchBox" class="access">搜尋詩歌 : </label>
      <input id="autocomplete" size="20" name="query" style="color: rgb(0, 0, 0); ">
      <input id="searchIcon" type="submit" title="搜尋" value="搜尋">
    </form>
  </div>
</body>
</html>
